<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in list" :key="index">{{item.name}}</li>
      </ul>
      <button @click="go()">走一走</button>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        list: [
          {
            id: 1,
            name: "帅哥",
          },
          {
            id: 2,
            name: "美女",
          },
          { id: 3, name: "程序猿" },
        ],
      },
      methods: {
        go() {
          const newList = this.list.shift();
          this.list.push(newList);
        },
      },
    });
  </script>
</html>
